<template>
	<view>
		<!-- 广告 -->
		<view class="blogger__item">
			<!-- @click="tn('/circlePages/advertise')" -->
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
				<view class="justify-content-item">
					<view class="tn-flex tn-flex-col-center tn-flex-row-left">
						<!-- 图标logo -->
						<view class="ad-pic tn-shadow-blur"
							style="background-image:url('https://tnuiimage.tnkjapp.com/logo/logo2.png')">
							<view class="ad-image">
							</view>
						</view>
						<view class="tn-padding-right" style="width: 65vw;">
							<view class="tn-padding-right tn-padding-left-sm tn-text-bold tn-text-lg">抓住那只猪科技有限公司</view>
							<view class="tn-padding-right tn-padding-left-sm tn-color-gray tn-text-ellipsis">我们都是好好孩子
							</view>
						</view>

					</view>
				</view>
				<view class="tn-color-gray">广告</view>
			</view>
			<tn-stack-swiper ref="stackSwiper" :list="adList" :switchRate="30" :height="360" width="92%"
				:autoplay="adAutoplay"></tn-stack-swiper>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'lunbo1',
		data() {
			return {
				adList: [{
						image: 'https://tnuiimage.tnkjapp.com/swiper/ad1.jpg'
					},
					{
						image: 'https://tnuiimage.tnkjapp.com/swiper/ad2.jpg'
					},
					{
						image: 'https://tnuiimage.tnkjapp.com/swiper/ad3.jpg'
					},
					{
						image: 'https://tnuiimage.tnkjapp.com/swiper/ad4.jpg'
					},
					{
						image: 'https://tnuiimage.tnkjapp.com/swiper/ad5.jpg'
					}
				],
				adAutoplay: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.blogger__item {
		padding: 30rpx;
	}
	
	.tn-margin-bottom {
		margin-bottom: 16px;
	}
	
	.tn-flex {
	  display: -webkit-flex;
	  display: flex;
	}
	
	.tn-flex-row-between {
	  justify-content: space-between;
	}
	.tn-flex-col-center {
	  align-items: center;
	}
	.tn-flex-row-left {
	  justify-content: flex-start;
	}
	/* 广告内容 start */
	.ad-image{
	  width: 80rpx;
	  height: 80rpx;
	  position: relative;
	}
	.ad-pic{
	  background-size: cover;
	  background-repeat:no-repeat;
	  // background-attachment:fixed;
	  background-position:top;
	  border-radius: 20%;
	}
	.tn-padding-right {
		padding-right: 16rpx;
	}
	
	.tn-text-lg {
	  font-size: 32rpx;
	}
	
	.tn-text-bold {
	  font-weight: bold;
	}
	
	.tn-padding-left-sm {
		padding-left: 10rpx;
	}
	
	
	.tn-text-ellipsis {
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	.tn-color-gray {
		color: #AAAAAA !important;
	}
	
</style>
